<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/mui.css" />
		<link rel="stylesheet" type="text/css" href="css/music.css" />
	</head>

	<body>

		<div class="mui-content">
			<header>
				<h3>当前播放</h3>
				<div class="option">
					<img src="" alt="歌手图片">
					<div id="play">Music</div>
				</div>
			</header>
			<audio id="myaudio" src="" autoplay='autoplay' loop='loop'></audio>
			<div class="hot">
				<h3>歌词</h3>
				<div class="ci">
					<p id="ly"></p>
				</div>
			</div>
		</div>

		<script src="js/jquery.min.js"></script>
		<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
		<!-- <script type="text/javascript" src="js/music.js" ></script>-->
		<script type="text/javascript">
			mui.init({
				subpages: [{
					url: 'plays.html',
					id: 'plays',
					styles: {
						top: 0,
						bottom: 0,
					}
				}]
			})
			var id = 0;
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				console.log(self);
				var souce = self.src;
				var img = self.pic;
				var id = self.cid;
				$('#myaudio')[0].src = souce;
				$('img').attr('src', img);
				console.log(id)
				
//http://route.showapi.com/213-2?showapi_appid=36599&showapi_sign=dde227bf0cea4c6ebcadc89b99477157&musicid=201712321
				mui.get('http://route.showapi.com/213-2', {
					showapi_appid: 36599,
					showapi_sign: 'dde227bf0cea4c6ebcadc89b99477157',
					musicid: id
				}, function(res) {
					//console.log(res);
					if(res && res.showapi_res_code == 0) {

						var data = res.showapi_res_body.lyric_txt;
						
//						var lis = template('tpl-li', {
//							data: songlist
//						});
//						//console.log(lis);
//						$('#list').append(lis);
						document.getElementById('ly').innerHTML = data;
					} else {
						mui.alert(res.showapi_res_error);
					}
					
				}, 'json');
				
				//暂停/播放	
				var play = document.getElementById('play');
					play.style.animation = 'run 2s linear infinite';
					
						
				
				
			})
		</script>
	</body>

</html>